<template>
	<view class="clientWrapper">
		<view class="clientSearchItem">
			<input class="search clientSearch" placeholder="输入机构编号/名称" v-model="searchValue"></input>
			<!-- <button class="searchBt" @tap="searchGoodsType()" style="">搜索</button>
			<button class="searchBt" data-target="OptionModal" data-state='0' @tap="showModal02" style="">新增</button> -->
		</view>
		<view class="clientSearchItem02">
			<button class="searchBt" @tap="searchGoodsType()" style="">搜索</button>
			<button class="searchBt" data-target="OptionModal" data-state='0' @tap="showModal02" style="">新增</button>
		</view>
		<!-- 新增修改模态框 v-if="BillType==1||BillType==13"-->
		<view class="cu-modal" :class="modalName02=='OptionModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{addOrChangeTitle}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="padding-xl-item" >
						<text>机构编号：</text><input v-model="BranchCode" />
					</view>
					<view class="padding-xl-item" >
						<text>机构名称：</text><input v-model="BranchName" />
					</view>
					<view class="padding-xl-item" >
						<text>地址：</text><input v-model="Address" />
					</view>
				
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="InfoSure()">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="container" v-show="isTable">
			<!-- 表格外层 -->
			<view class="tdHeader" :style="{width:allWidth+'px'}">
				<view class="tdTh" v-for="(item,index) in tdHeaderList" :key="item.name" :style="{width:clientSettingWidthList[index] + 'px'}">
					{{item.name}}
				</view>
			</view>
			<view class="tdContain" :style="{width:allWidth +'px',height:tdHeight+'px'}">
				<view class="tdItems" v-for="(item,index) in clientList" :key="index" 
				@tap="showModal02" data-state='1' :data-index='index' data-target="OptionModal" @longtap="Del(item.BranchID)">
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[0] + 'px'}">{{index+1}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[1] + 'px'}">{{item.BranchCode}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[2] + 'px'}">{{item.BranchName}}</view>
					<view class="tdItems tdItem" :style="{width:clientSettingWidthList[3] + 'px'}">{{item.Address}}</view>

				</view>
			</view>
		</view>
		<view :style="{height:tdListHeight+'px'}" class="listContainer" v-show="!isTable">
			<view class="tdListItem" v-for="(item,index) in clientList" :key="index" :style="{ display:(isLookMore === index) ? 'table':'table'}"  @longtap="Del(item.BranchID)">
				<view @tap="showModal02" data-state='1' :data-index='index' data-target="OptionModal" >
					<view class="ClientTitle">名称:{{item.BranchName}}</view>
					<view>机构编号:{{item.BranchCode}}</view>
					<view>地址:{{item.Address}}</view>
				</view>
				<view class="sortIndex">{{index+1}}</view>
				<!-- <view class="lookMore" @tap="lookMore(index)"></view> -->
			</view>
		</view>
		<view class="options">
			<!-- <button @tap="changeShow">切换展示</button>
			<button @tap="showModal" data-target="Modal">修改列宽</button> -->
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">设置表格列宽度</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<view class="padding-xl-item" v-for="(item,index) in tdHeaderList" :key="item.name">
							<text>{{item.name}}:</text><input v-model="clientSettingTempList[index]" />
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal()">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="sureSetting()">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	//速云公共接口
	import * as utilsApi from '@/syApis/syUtilsApi/utisl.js';
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		data() {
			return {
				//搜索条件
				inputStr: "",
				//表头列表
				//tb表头
				tdHeaderList: [{
						name: "序号"
					},
					{
						name: "机构编号"
					}, {
						name: "机构名称"
					}, {
						name: "地址"
					}
				],
				//业务员搜索
				SearchOptionName: "",
				//表头宽度列表
				clientSettingWidthList: [100, 150, 150, 100],
				//设置表头宽度临时列表
				clientSettingTempList: [100, 150, 150, 100],
				//表格内容显示部分高度
				tdHeight: 0,
				//数据展示部分高度
				tdListHeight: 0,
				//供应商or客户列表
				clientList: [],
				//判读是否供应商
				isClient: false,
				//是否展开
				isLookMore: -1,
				//是否展示表格
				isTable: false,
				//弹框展示
				modalName: null,
				modalName02: null,
				//输入框的值
				searchValue: "",
				//底部列表滚动的高度
				bottomListHeight: 0,
				//进行操作的标识
				addOrChangeType: 0,
				//进行操作的标题
				addOrChangeTitle: "新增类别",
				//商品类别
				goodType: "",
				//弹框的显隐
				isShowDialog: false,
				//输入框的值
				goodTypeVaule: "1111",
				//当前新增或者修改的机构的ID
				//部门列表
				department: [{
					bh: "D01",
					TypeName: "总部"
				}],
				//机构编号
				BranchCode: "",
				//机构名称
				BranchName: "",
				OperatorList: [],
				//地址
				Address: "",
				//当前选择的业务员条目
				SelectOptionsObj: {
					OperatorName: "",
					OperatorID: ""
				},
				//新增修改摊款判断值
				type:0

			}
		},
		methods: {
			//查询机构
			searchGoodsType() {
				if (this.searchValue == '') {
					this.Get_DepartmentMessage();
				} else {
					let filter = "BranchName like '%" + this.searchValue + "%' or BranchCode like '%"+this.searchValue+"%'";
					this.Get_DepartmentMessage(filter);
				}
			},
			//切换表格风格
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeShow();
				} else if (index == 1) {
					this.showModal();
				}
			},
			hideModal(){
				this.modalName = "";
				this.modalName02 = "";
			},
			
			//显示弹框
			showModal() {
				this.modalName = "Modal"
			},
			//显示新增弹框
			showModal02(e) {
				this.modalName02 = e.currentTarget.dataset.target;
				let type = e.currentTarget.dataset.state;
				this.addOrChangeType = type;
				if(type==0){
					this.addOrChangeTitle = "新增机构档案";
					this.BranchID = "";
					this.BranchCode = "";
					this.BranchName = "";
					this.Address = "";
				}else{
					let index = e.currentTarget.dataset.index;
					let item = this.clientList[index];
					this.addOrChangeTitle = "修改机构档案";
					this.BranchID = item.BranchID;
					this.BranchCode = item.BranchCode;
					this.BranchName = item.BranchName;
					this.Address = item.Address;
				}
			},
			hideChaneg() {
				this.modalName = "";
				let tempList = [];
				this.clientSettingWidthList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingTempList = tempList;
				// uni.setStorageSync("tbWidList",JSON.stringify(tempList));
				// this.tdWidthList = this.tdWidth;
			},
			sureSetting() {
				let tempList = [];
				this.clientSettingTempList.forEach((item,index)=>{
					tempList.push(item);
				})
				this.clientSettingWidthList = tempList;
				uni.setStorageSync("InfoOrganWidthList",JSON.stringify(tempList));
				this.modalName = "";
			},
			InfoSure(){
				this.clientSettingWidthList = this.clientSettingTempList;
				 this.modalName02 = null;
				
				 if(this.addOrChangeType==0){
					  this.addGoodsTypeName();
				 }else{
					 this.changeGoodsType();
				 }
			},
			//新增机构
			addGoodsTypeName() {
				let CreateID = uni.getStorageSync("UserCode");
				let Save_M_Data_Json = {
					"CreateID": CreateID,
					"BranchCode": this.BranchCode,
					"BranchName": this.BranchName,
					"Address": this.Address
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Add_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {
			
						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip("新增成功");
							that.Get_DepartmentMessage();
						}
					}
				})
			
			},
			//获取全部机构
			Get_DepartmentMessage(filter) {
				if (filter === undefined) {
					filter = "";
				}
				let data = {
					Filter: filter
				}
				var _this = this;
				Api.Get_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("获取登录信息失败");
							return;
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
							return;
						} else {
							if(res.data.ResultMsg.length==0){
								Api.showTip("查无数据");
							}
							_this.clientList = res.data.ResultMsg;
							_this.searchValue = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				})
			},
			//修改机构
			changeGoodsType() {
				let CreateID = uni.getStorageSync("UserCode");
				let Save_M_Data_Json = {
					"BranchID": this.BranchID,
					"BranchCode": this.BranchCode,
					"BranchName": this.BranchName,
					"Address": this.Address,
					"CreateID": CreateID
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Update_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {
			
						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip("修改成功");
							that.Get_DepartmentMessage();
						}
					}
				})
			},
			//删除机构
			Del(BranchID) {
				var that = this
				Api.showConfirm("是否删除此<机构档案>", function(state) {
					if (state) {
						let data = {
							BranchID
						}
						Api.Delete_BranchMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									// api.showTip()
								} else if (res.data.ErrorMsg != "") {
									Api.showTip(res.data.ErrorMsg)
								} else {
									Api.showTip("删除成功");
									
									let tempList = [];
									that.clientList.forEach((item, index) => {
										if (item.BranchID != BranchID) {
											tempList.push(item);
										}
									})
									that.clientList = tempList;
				
								}
							} else {
								Api.showTip("服务器开小差了");
							}
						})
					} else {
						console.log("点击了取消")
					}
				})
			},
			//获取供应商or客户or往来单位
			Get_ClientMessage(Filter = '') {
				let data = {};
				if (this.isClient == 0) {
					data = {
						Filter: "IsClient<>0" + Filter
					};
				} else if (this.isClient == 1) {
					data = {
						Filter: "IsClient<>1" + Filter
					};
				} else {
					data = {
						Filter: Filter
					};

				}
				var that = this;
				utilsApi.Get_ClientMessage(data, function(res) {
					//请求成功
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != '') {

						} else {
							that.clientList = res.data.ResultMsg;
							that.inputStr = "";
						}
					} else {

					}
				});
			},
			//查看更多
			lookMore(index) {
				if (index == this.isLookMore) {
					this.isLookMore = -1;
				} else {
					this.isLookMore = index;
				}
			},
			//选择供应商or客户
			selectClient(index) {
				//拿到选择的供应商条目
				let ClientItem = JSON.stringify(this.clientList[index]);
				//返回监听
				this.$eventHub.$emit('clientListen', ClientItem);
				uni.navigateBack({
					delta: 1
				})
				this.modalName02 =ClientItem;
				
			},
			//修改展示方式
			changeShow() {
				this.isTable = !this.isTable;
			},
			//搜索
			search() {
				if (this.inputStr != "") {
					var Filter = " and ClientName like '%" + this.inputStr + "%'";
					this.Get_DepartmentMessage(Filter);
				} else {
					this.Get_DepartmentMessage();
				}
			},
			
		},
		created() {
			
			// this.Get_ClientMessage();
			this.Get_DepartmentMessage();//显示列表
		},
		onShow() {
			let screenHeight = uni.getSystemInfoSync().windowHeight;
			//数据展示部分的高度
			this.tdListHeight = screenHeight - 100;
			//表格除表头部分数据的展示
			this.tdHeight = screenHeight - 140;
		},
		onLoad(options) {
			//是否供应商
			this.isClient = options.isClient;
			uni.setNavigationBarTitle({
				title: "机构档案"
			})
			// 获取表格框的宽度
			let tbWidList = uni.getStorageSync("InfoOrganWidthList", "");
			// console.log(tbWidList);
			if (tbWidList != "") {
				this.clientSettingWidthList = JSON.parse(tbWidList);
				this.clientSettingTempList = JSON.parse(tbWidList);
			}
		},
		computed: {
			//表头总宽度
			allWidth() {
				let allClietnWidth = 0;
				this.clientSettingWidthList.forEach(item => {
					allClietnWidth += parseFloat(item);
				})
				return allClietnWidth;
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
		font-family: "宋体";
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.clientWrapper {
		width: 100%;
		height: 100%;
	}

	.clientSearchItem {
		width: 100%;
		height: 50px;
		display: flex;
		box-sizing: border-box;
		padding: 7.5px 5px 0px 5px;
	}

	.clientSearchItem02 {
		width: 100%;
		height: 50px;
		display: flex;
		box-sizing: border-box;
		padding: 2px 0px 0px 2px;
		padding-right: 5px;
		box-sizing: border-box;
	}
	
	.clientSearchItem02 .searchBt {
		flex: 1;
		height: 35px;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #ccc;
		/* border-top-right-radius: 0px;
		border-bottom-right-radius: 0px; */
		padding-left: 10px;
		font-size: 14px;
		margin-left: 5px;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}
	.clientSearchItem .clientSearch {
		flex: 1;
		height: 35px;
		line-height: 35px;
		border-radius: 5px;
		border: 1px solid #ccc;
		/* 	border-top-right-radius: 0px;
		border-bottom-right-radius: 0px; */
		padding-left: 8px;
		font-size: 14px;

	}

	.clientSearchItem .searchBt {
		width: 60px;
		height: 35px;
		line-height: 35px;
		font-size: 15px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		background-color: rgba(124, 170, 216, 1);
		color: #FFF;
		background-color: #7CAAD8;
	}

	.options {
		width: 100%;
		height: 0px;
		display: flex;
		border-top: 1px solid #ccc;
	}

	.options button {
		padding-left: 12px;
		padding-right: 12px;
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		margin-top: 5px;
		background: rgba(124, 170, 216, 1);

		color: #FFF;
		box-sizing: border-box;

	}

	.container {
		width: 100%;
		overflow: auto;
	}

	.container .tdHeader {
		height: 40px;
		line-height: 40px;
		background: rgba(124, 170, 216, 1);
	}

	.container .tdHeader .tdTh {
		display: inline-block;
		text-align: center;
		color: #FFF;
		border-right: 1px solid #ccc;
		box-sizing: border-box;
	}

	.tdContain {
		overflow: auto;
	}

	.tdContain .tdItems {
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tdContain .tdItems.tdItem {
		box-sizing: border-box;
		min-height: 40px;
		float: left;
		border-right: 1px solid #ccc;
		border-bottom: 1rpx solid #ccc;
		padding-left: 4px;
		padding-right: 4px;
		overflow: auto;
	}

	.listContainer {
		width: 100%;
		overflow-x: hidden;

	}

	.listContainer .tdListItem {
		width: 95%;
		margin: auto;
		margin-bottom: 5px;
		border-radius: 5px;
		border: 1px solid #ebebeb;
		padding-left: 35px;
		padding-right: 8px;
		box-sizing: border-box;
		position: relative;
		height: 70px;
		overflow: hidden;
	}

	.listContainer .tdListItem.more {
		display: table;
	}

	.listContainer .tdListItem view {
		padding-top: 2px;
		padding-bottom: 2px;
		line-height: 20px;
	}

	.listContainer .tdListItem .clientItemShow {
		display: flex;
	}

	.listContainer .tdListItem .ClientTitle {
		font-size: 16px;
		font-weight: bold;
	}

	.listContainer .tdListItem .clientItemShow text {
		flex: 1;
	}

	.listContainer .tdListItem .sortIndex {
		padding: 0px 5px;
		position: absolute;
		left: 5px;
		top: 5px;
		border-radius: 2px;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.listContainer .tdListItem .lookMore {
		width: 20px;
		height: 20px;
		background: url(../../static/pullMore.png) no-repeat;
		position: absolute;
		right: 5px;
		bottom: 5px;
		border-radius: 2px;
		color: #FFF;
		padding: 0px 5px;
	}

	.padding-xl-item {
		display: flex;
	}

	.padding-xl-item text {
		min-width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: right;
		padding-right: 10px;
		box-sizing: border-box;
	}

	.padding-xl-item input {
		flex: 1;
		border: 1px solid #CCC;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
	}

	.flOptions {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		display: flex;
		flex-direction: row;
		text-align: center;
		position: fixed;
		bottom: 0upx;
		left: 0upx;

		button {
			flex: 1;
			height: 100upx;
			border-radius: 0upx;
			line-height: 100upx;
			background: rgb(124, 170, 216);
			color: #FFF;

			&:first-child {
				border-right: 1px solid #FFF;
			}
		}
	}
</style>
